import { defineComponent, ref } from 'vue';

/* components */
/* scss */
import '@src/modules/intelligentQuality/components/style/qualityItem.scss';
import Fragment from 'vue-frag';
/* utils */
import { isOpenData } from '@src/util/platform';
import { openAccurateTab } from '@src/util/platform'
import state from '@src/modules/intelligentQuality/utils/state.ts'
/* type */
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'

export default defineComponent({
  name: 'qualityItem',
  props: {
    data: {
        type: Object,
        default: () => ({}),
    }
  },
  emit: ['delete', 'edit', 'change', 'goDetail'],
  setup(props, { emit }) {
    const value = ref(props.data);
    const isEdit = ref(true);

    const onEditHandler = () => {};

    const updateState = () => {};

    const onDeleteHandler = () => {};

    const onLogListHandler = () => {};

    const onUpdateHandler = () => {};

    const handleSwitchChange = (val, value) => {
        emit('change', val, value)   
    }


    return {
      value,
      isEdit,
      onEditHandler,
      updateState,
      onDeleteHandler,
      onLogListHandler,
      handleSwitchChange
    };
  },
  render() {
    const onSwitchChange = val => this.handleSwitchChange(val, this.value);
    return (
      <div class={'quality-item-box'}>
            <div class="quality-item-box-content" onClick={() => this.$emit('goDetail', this.value.robotNo)}>
                <div class="quality-item-box-content-header">
                    <div class="quality-item-box-content-header-title">
                        {this.value.name}
                    </div>
                    <div class="quality-item-box-content-switch">
                        <div class="quality-item-box-content-switch-btn" onClick={event => event.stopPropagation()}>
                          {
                            state.auth.edit ? (
                              <el-switch active-value={true} inactive-value={false} key={this.value.robotNo} value={this.value.enabled} onChange={onSwitchChange}/>
                            ) : (
                              <el-tooltip effect="dark" content={'你没有操作权限'} placement="top">
                                <el-switch active-value={true} inactive-value={false} key={this.value.robotNo} disabled={true} value={this.value.enabled} onChange={onSwitchChange}/>
                              </el-tooltip>
                            )
                          }
                        </div>
                        <div class="quality-item-box-content-switch-text">
                            {
                                this.value.enabled === true ? (
                                    <span class="work">工作中</span>
                                ) : (
                                    <span class="no-work">未启用</span>
                                )
                            }
                        </div>
                    </div>
                </div>
                <div class="quality-item-box-content-desc">
                    <span>{this.value.remarks}</span>
                </div>
                <div class="quality-item-box-content-info">
                    <div class="qua-info-index">
                        {this.value.robotNo}
                    </div>
                    <div class="qua-info-other">
                        <div class="qua-count qua-share">
                            <span>运行次数：</span><span>&nbsp;{this.value.totalRunCount || 0}&nbsp;</span><span>次</span>
                        </div>
                        <div class="qua-zhijian qua-share">
                            <span>质检合格率：</span><span>&nbsp;{this.value.passRate || 0}&nbsp;%</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="quality-item-box-footer">
                <div class="footer-item">
                  {
                    state.auth.delete ? (
                      <div class="qua-delete qua-btn" onClick={() => this.$emit('delete', this.value.robotNo)}>
                        <i class="iconfont icon-delete"></i><span>删除</span>
                      </div>
                    ) : null
                  }
                </div>
                <div class="footer-item">
                  {
                    state.auth.edit ? (
                      <div class="qua-edit qua-btn" onClick={() => this.$emit('edit', this.value.robotNo)}>
                        <i class="iconfont icon-edit-square1"></i><span>编辑</span>
                      </div> 
                    ) : null
                  }
                </div>
            </div>
        </div>
    );
  },
});
